<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>对象语法绑定 HTML Class</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
</head>

<body>
    <div id="app">
        <div v-bind:class="{ active: isActive, 'text-danger': hasError  }">
            1、(内联)对象绑定 Class
        </div>


        <div v-bind:class="classObject">
            2、对象绑定 Class
        </div>


        <!-- v-bind:class 指令也可以与普通的 class attribute 共存 -->
        <div class="static" v-bind:class="computedClassObject">
            3、计算属性的对象绑定 Class
        </div>

    </div>
</body>

<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            isActive: false,
            hasError: true,
            classObject: {
                active: true,
                'text-danger': false
            }
        },
        computed: {
            computedClassObject: function() {
                return {
                    active: this.isActive && !this.hasError,
                    'text-danger': this.hasError
                }
            }
        }
    })
</script>

</html>